<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-row :gutter="20">
        <!-- 欢迎语 -->
        <el-col :span="7">
          <el-card shadow="hover" style="width: 100%">
            <div style="width: 100%; display: inline-block">
              <el-statistic :value="this.welcome.apply" title="我提交的">
                <template slot="prefix">我提交了 </template>
                <template slot="suffix"> 申请单</template>
              </el-statistic>
            </div>
          </el-card>
          <el-card shadow="hover" style="width: 100%; margin-top: 10px">
            <div style="width: 100%; display: inline-block">
              <el-statistic :value="this.welcome.reviewer" title="待我审批">
                <template slot="prefix">等待我审批 </template>
                <template slot="suffix"> 申请单</template>
              </el-statistic>
            </div>
          </el-card>
          <el-card shadow="hover" style="width: 100%; margin-top: 10px">
            <div style="width: 100%; display: inline-block">
              <el-statistic :value="this.welcome.checker" title="待我验收">
                <template slot="prefix">等待我验收 </template>
                <template slot="suffix"> 申请单</template>
              </el-statistic>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover" style="width: 100%">
            <div style="font-size: 18px; text-align: center; margin-top: 35px">
              {{ this.welcome.content }}
            </div>
            <br/>
            <el-statistic
              ref="statistic"
              format="HH:mm:ss"
              :value="deadline4"
              title="距离明日："
              time-indices
            >
            </el-statistic>
          </el-card>
        </el-col>
        <!-- 快捷入口 -->
        <el-col :span="9">
          <el-card>
            <div slot="header" class="clearfix">
              <span>快捷入口</span>
            </div>
            <el-button @click="toinapply" type="primary" icon="el-icon-document"
              >入库申请</el-button
            >
            <el-button
              @click="tooutapply"
              type="primary"
              icon="el-icon-document"
              >出库申请</el-button
            >
            <el-button
              @click="tomyapply"
              type="primary"
              icon="el-icon-s-promotion"
              >我的申请单</el-button
            >
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="20">
        <!-- 系统公告 -->
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span>系统公告</span>
            </div>
            <el-collapse accordion>
              <el-collapse-item
                v-for="item in this.activeNotice"
                :key="item.id"
                :title="item.title"
              >
                <div>{{ item.content }}</div>
                <div>{{ item.time }}</div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-col>
        <!-- 系统信息 -->
        <el-col :span="9">
          <el-card>
            <div slot="header" class="clearfix">
              <span>系统版本信息</span>
            </div>
            <el-descriptions class="margin-top" title="" :column="1" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  项目名称
                </template>
                {{ this.version.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  当前版本
                </template>
                {{ this.version.ver }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  作者
                </template>
                {{ this.version.author }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  联系方式
                </template>
                {{ this.version.phone }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { getNotices, getVersion, getWelcome } from "../../api/basisMG";
import { getCookie } from "../../utils/util";
export default {
  name: "welcome",
  data() {
    return {
      activeNotice: [],
      version: {},
      welcome: {},
      // cookie中的基本用户信息对象
      user: {
        id: 0,
        storeid: 0,
        userName: "",
        store: "",
        role: "",
        useremail: "",
      },
      apply: 0,
      reviewer: 0,
      checker: 0,
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
    };
  },
  // 导入组件
  components: {},
  // 创建完毕状态(里面是操作)
  created() {
    // cookie中读取邮箱
    this.user = JSON.parse(getCookie("userdata"));
    this.getNoticesData(this.user);
    this.getVersionData();
    this.getWelcomeData(this.user);
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 获取公告
    getNoticesData(user) {
      getNotices(user).then((res) => {
        if (res.status == 200) {
          this.activeNotice = res.data;
        } else {
          this.$message.error("登录用户信息有误");
        }
      });
    },
    // 获取系统版本信息
    getVersionData() {
      getVersion().then((res) => {
        if (res.status == 200) {
          this.version = res.data;
        } else {
          this.$message.error("登录用户信息有误");
        }
      });
    },
    // 获取欢迎语
    getWelcomeData(user) {
      getWelcome({ id: user.id, storeid: user.storeid }).then((res) => {
        if (res.status == 200) {
          this.welcome = res.data;
        } else {
          this.$message.error("登录用户信息有误");
        }
      });
    },
    // 跳转到入库申请
    toinapply(){
      this.$router.push({ path: "/apply/inapply" });
    },
    // 跳转到出库申请
    tooutapply(){
      this.$router.push({ path: "/apply/outapply" });
    },
    tomyapply(){
      this.$router.push({ path: "/account/myapply" });
    }
  },
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.descitem {
  margin: 2;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 4%;
  margin-bottom: 4%;
  margin-left: 6%;
  margin-right: 6%;
  width: 1100px;
}
</style>